<template>
  <view>
    <view class="drop">
      <uv-drop-down
        ref="dropDown"
        sign="dropDown_1"
        text-size="22rpx"
        text-active-size="22rpx"
        text-active-color="#333333"
        text-color="#333333"
        @click="selectMenu"
        :defaultValue="defaultValue"
        :extra-icon="{ name: 'arrow-down', color: '#333333', size: '22rpx' }"
        :extra-active-icon="{
          name: 'arrow-up',
          color: '#333333',
          size: '22rpx',
        }"
      >
        <uv-drop-down-item
          name="order"
          type="2"
          :label="dropItem('order').label"
          :value="dropItem('order').value"
        >
        </uv-drop-down-item>
        <uv-drop-down-item
          name="type"
          type="2"
          :label="dropItem('type').label"
          :value="dropItem('type').value"
        >
        </uv-drop-down-item>
        <uv-drop-down-item
          name="vip_type"
          type="2"
          :label="dropItem('vip_type').label"
          :value="dropItem('vip_type').value"
        >
        </uv-drop-down-item>
      </uv-drop-down>
      <uv-drop-down-popup
        sign="dropDown_1"
        @popupChange="change"
        :currentDropItem="currentDropItem"
        @clickItem="clickMenuItem"
      >
        <!-- <view
          style="width: 670rpx; height: 300rpx; background-color: #fff"
        ></view> -->
      </uv-drop-down-popup>
    </view>
    <view class="pageLayout">
      <view
        class="cus_car"
        v-for="item in dataList"
        :key="item.customerID"
        @click="clickItem(item)"
      >
        <view class="top">
          <text class="detail">查看详情</text>
          <u-icon name="arrow-right" color="#1C1B2680" size="10"></u-icon>
        </view>
        <view class="cus_box">
          {{ item.customerName }}-{{
            item.customerPhoneNumber ? item.customerPhoneNumber + "/" : ""
          }}{{ item.appNumber ? item.appNumber : "" }}
        </view>
        <view class="tag_box">
          <text
            class="follow_tag"
            v-if="statusMap.get(item.customerResourceState) <= 2"
            >待跟进</text
          >
          <text class="follow_tag" v-else>待服务</text>
          <view
            class="tips s"
            v-if="item.customerServiceCustomerSourceLevel === 'S'"
            >S级</view
          >
          <view
            class="tips a"
            v-else-if="item.customerServiceCustomerSourceLevel === 'A'"
            >A级</view
          >
          <view
            class="tips b"
            v-else-if="item.customerServiceCustomerSourceLevel === 'B'"
            >B级</view
          >
          <view
            class="tips c"
            v-else-if="item.customerServiceCustomerSourceLevel === 'C'"
            >C级</view
          >
          <view
            class="tips d"
            v-else-if="item.customerServiceCustomerSourceLevel === 'D'"
            >D级</view
          >
        </view>
        <view class="tag_box" style="margin-top: 10rpx">
          <!-- <view class="tips hasLink" v-if="item.hasLink">已拍</view>
          <view class="tips hasLink" v-if="item.linkType === 'FiveThousand'"
            >5000链接</view
          >
          <view class="tips hasLink" v-if="item.linkType === 'OneThousand'"
            >1000链接</view
          >
          <view
            class="tips hasLink"
            v-if="item.serviceType === 'OnLineShipping'"
            >线上代买</view
          >
          <view
            class="tips hasLink"
            v-if="item.serviceType === 'OfflineViewing'"
            >线下带看</view
          > -->
          <view
            class="tips hasLink"
            v-for="(item, index) in item.listThreeLevelTag"
            :key="index"
            >{{ item.tag }}</view
          >
        </view>

        <view class="time">
          <u-icon name="clock-fill" size="12" color="#8d8d92"></u-icon>
          <view class="time_detail">{{
            formatTimestamp(item.allocationTime, "onlyDate")
          }}</view>
        </view>
        <view class="server_box">
          <u-icon name="account-fill" size="12" color="#8d8d92"></u-icon>
          <view class="server_name">客服：{{ item.customerServiceName }}</view>
          <view v-if="item.customerServiceGroupLeaderName">|</view>
          <view v-if="item.customerServiceGroupLeaderName" class="server_gropup"
            >组长：{{ item.customerServiceGroupLeaderName }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>
  
  <script>
//   import store from "../../store/index";
import { queryCustomerLinkManagerPage } from "@/api/customer/index";
export default {
  components: {},
  onPageScroll() {
    // 滚动后及时更新位置
    this.$refs.dropDown.init();
  },
  computed: {
    dropItem(name) {
      return (name) => {
        const result = {};
        const find = this.result.find((item) => item.name === name);
        if (find) {
          result.label = find.label;
          result.value = find.value;
        } else {
          result.label = this[name].label;
          result.value = this[name].value;
        }
        return result;
      };
    },
    // 获取当前下拉筛选项
    currentDropItem() {
      return this[this.activeName];
    },
  },
  data() {
    return {
      id: "",
      dataList: [],
      pageIndex: 1, // 当前页码
      pageSize: 10, // 每页数量
      hasMore: true, // 是否还有更多数据
      loading: false, // 加载状态
      defaultValue: [0, "all", "0"],
      statusMap: new Map([
        ["Assigned", 0],
        ["ToLinkToBeConfirm", 2],
        ["FollowUp", 1],
        ["InvitationManager", 3],
        ["Transacted", 5],
      ]),
      order: {
        label: "综合排序",
        value: "all",
        activeIndex: 0,
        color: "#333",
        activeColor: "#a22d27",
        size: "22rpx",
        activeSize: "22rpx",
        child: [
          {
            label: "综合排序",
            value: "all",
          },
          {
            label: "最新发布",
            value: "new",
          },
          {
            label: "低价优先",
            value: "money",
          },
        ],
      },
      type: {
        label: "文档格式",
        value: "all",
        activeIndex: 0,
        color: "#333",
        activeColor: "#a22d27",
        size: "22rpx",
        activeSize: "22rpx",
        child: [
          {
            label: "全部",
            value: "all",
          },
          {
            label: "PDF",
            value: "pdf",
          },
          {
            label: "WROD",
            value: "word",
          },
          {
            label: "PPT",
            value: "ppt",
          },
        ],
      },
      vip_type: {
        label: "文档格式",
        value: "all",
        activeIndex: 0,
        color: "#333",
        activeColor: "#a22d27",
        size: "22rpx",
        activeSize: "22rpx",
        child: [
          {
            label: "全部",
            value: "all",
          },
          {
            label: "PDF",
            value: "pdf",
          },
          {
            label: "WROD",
            value: "word",
          },
          {
            label: "PPT",
            value: "ppt",
          },
        ],
      },
      activeName: "order",
      result: [{ name: "order", label: "最新发布", value: "new" }],
    };
  },
  onLoad(options) {},
  mounted() {
    console.log(8848);

    this.getList();
  },
  methods: {
    /**
     * 点击菜单回调处理
     * @param {Object} item 选中项 { label,value } = e
     */
    clickMenuItem(e) {
      let { label, value } = e;
      const findIndex = this.result.findIndex(
        (item) => item.name == this.activeName
      );
      if (
        this.defaultValue.indexOf(value) > -1 &&
        this[this.activeName].label
      ) {
        label = this[this.activeName].label;
      }
      // 已经存在筛选项
      if (findIndex > -1) {
        this.$set(this.result, findIndex, {
          name: this.activeName,
          label,
          value,
        });
      } else {
        this.result.push({
          name: this.activeName,
          label,
          value,
        });
      }
      this.result = this.result.filter(
        (item) => this.defaultValue.indexOf(item.value) == -1
      );
      console.log(this.result);
    },
    change(e) {
      console.log("弹窗打开状态：", e);
    },
    /**
     * 点击每个筛选项回调
     * @param {Object} e { name, active, type } = e
     */
    selectMenu(e) {
      const { name, active, type } = e;
      this.activeName = name;
      // type 等于1 的需要特殊处理：type不等于1可以忽略

      const find = this.result.find((item) => item.name == this.activeName);
      if (find) {
        const findIndex = this[this.activeName].child.findIndex(
          (item) => item.label == find.label && item.value == find.value
        );
        this[this.activeName].activeIndex = findIndex;
      } else {
        this[this.activeName].activeIndex = 0;
      }
    },
    /**
     * 点击列表跳转详情页
     */
    clickItem(item) {
      // console.log(item,'item');
      uni.navigateTo({
        url: `/pages/customer/detail?id=${item.customerResourceID}`,
      });
    },
    /**
     * 获取列表
     */
    getList() {
      if (!this.hasMore || this.loading) return;

      this.loading = true;

      let data = {
        classeseRecordID: this.id,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      };
      queryCustomerLinkManagerPage(data)
        .then((res) => {
          console.log(res, "res");

          // 假设接口返回格式为 { list: [], total: 0 }
          if (res.data.items && res.data.items.length > 0) {
            this.dataList = [...this.dataList, ...res.data.items];

            // 计算是否还有更多数据
            this.hasMore = this.dataList.length < res.data.totalCount;
          } else {
            this.hasMore = false;
          }

          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
  /**
   * 上拉加载更多
   */
  onReachBottom() {
    console.log("上拉加载更多");

    if (this.hasMore) {
      this.pageIndex++;
      this.getList();
    }
  },
};
</script>
  <style>
page {
  background-color: #f5f7fb;
}
</style>
  <style lang="scss" scoped>
.pageLayout {
  padding: 40rpx;
}
.custom-option {
  display: flex;
  align-items: center;
}
.cus_car {
  background-color: #ffffff;
  width: 670rpx;
  // height: 207rpx;
  padding: 40rpx;
  box-sizing: border-box;
  padding-top: 13rpx;
  margin-bottom: 24rpx;
  .top {
    display: flex;
    color: #1c1b2680;
    font-size: 20rpx;
    justify-content: flex-end;
  }
  .cus_box {
    font-weight: 700;
    color: #000000;
    font-size: 24rpx;
  }
  .tips_box {
    display: flex;
  }
  .time {
    display: flex;
    align-items: baseline;
    font-size: 22rpx;
    margin-top: 12rpx;
    .time_detail {
      margin-left: 10rpx;
    }
  }
  .server_box {
    display: flex;
    align-items: baseline;
    font-size: 22rpx;
    margin-top: 12rpx;
    .u-icon {
      margin-right: 10rpx;
    }
    .server_name {
      margin-left: 10rpx;
      margin-right: 10rpx;
    }
    .server_gropup {
      margin-left: 10rpx;
    }
  }
}
.drop {
  position: relative;
  width: 750rpx;
  ::v-deep .uv-text__value {
    font-size: 22rpx !important;
  }
}
.tag_box {
  margin-top: 32rpx;
  .follow_tag {
    padding: 2rpx 42rpx;
    background: #fe8b00;
    border-radius: 100rpx 100rpx 100rpx 4rpx;
    color: #ffffff;
    font-size: 20rpx;
    margin-right: 24rpx;
  }
}
.tips {
  padding: 2rpx 18rpx;
  font-size: 16rpx;
  margin-right: 5rpx;
  margin-top: 8rpx;
  display: inline-block;
}
.s {
  color: #a22c26;
  border: 1rpx solid #a22c26;
  background-color: #fbe6e8;
}
.a {
  color: #fe8b00;
  border: 1rpx solid #fe8b00;
  background-color: #fff9eb;
}
.b {
  color: #52c41a;
  border: 1rpx solid #52c41a;
  background-color: #f6ffed;
}
.c {
  color: #1677ff;
  border: 1rpx solid #1677ff;
  background-color: #e6f4ff;
}
.d {
  color: #b088fa;
  border: 1rpx solid #b088fa;
  background-color: #f0e8ff;
}
</style>